import React, { Component } from 'react';
import classnames from 'classnames';
import WPT, { Navigator, onTouchEnd } from 'wpt';
import update from 'immutability-helper';

import './index.less';

const API = {
    index: '//api.weipaitang.com/*',
};

export default class Index extends Component {
    state = {
        imageList: [{ id: 1, url: 'http://xxx.jpg' }, { id: 2, url: 'http://xxx.jpg' }],
        selectedImage: null,
    };

    componentDidMount() {
        WPT.getData(API.index, {}, res => {
            if (res.code !== 0) {
                WPT.Modal.alert(res.msg);
                return;
            }
            this.setState({ code: res.code });
        });
    }

    // update demo
    // 尽量应保持state扁平化
    handle = () => {
        // {$push: array} push() all the items in array on the target.
        // 例子：图片列表尾部添加item
        this.setState(
            update(this.state, {
                imageList: {
                    $push: [{ id: 3, url: 'http://xxx.jpg' }],
                },
            })
        );

        // {$unshift: array} unshift() all the items in array on the target.
        // 例子：图片列表头部添加item
        this.setState(
            update(this.state, {
                imageList: {
                    $unshift: [{ id: 4, url: 'http://xxx.jpg' }],
                },
            })
        );

        // {$splice: array of arrays} for each item in arrays call splice() on the target with the parameters provided by the item.
        // {$splice: [[start, deleteCount, item1, item2, ...]]} 参数同Array.prototype.splice
        // 例子：从index1开始删除2个item
        this.setState(
            update(this.state, {
                imageList: {
                    $splice: [[1, 2]],
                },
            })
        );

        // {$set: any} replace the target entirely.
        // 例子：更改索引为1的图片的url
        this.setState(
            update(this.state, {
                imageList: {
                    1: {
                        url: {
                            $set: 'http://xx.png',
                        },
                    },
                },
            })
        );

        // {$merge: object} merge the keys of object with the target.
        // Shallow Merge, 结果同newObj = Object.assign({}, obj, { newProp: newValue })
        // 例子：更改索引为1的图片增加一个tag属性
        this.setState(
            update(this.state, {
                imageList: {
                    1: {
                        $merge: { tag: 'pet' },
                    },
                },
            })
        );

        // {$apply: function} passes in the current value to the function and updates it with the new returned value.
        // 根据当前节点的值计算返回新值
        // 例子：更改索引为1的图片的url的扩展名改为gif
        // 一般方式获取url得很麻烦的写成this.state.imageList[1].url
        this.setState(
            update(this.state, {
                imageList: {
                    1: {
                        url: {
                            $apply: url => url.replace(/\w+$/, 'gif'),
                        },
                    },
                },
            })
        );
    };

    /**
     * @param {Object} selectedImage 当前选中的图片
     * @return {Function}
     */
    handelSelect = selectedImage => () => {
        this.setState({ selectedImage });
    };

    render() {
        const { imageList, selectedImage } = this.state;
        return (
            <div className="page-*">
                {imageList.map(image => (
                    <div
                        key={image.id}
                        className={classnames({ seleted: selectedImage && selectedImage.id === image.id })}
                        style={{ backgroundImage: `url(${image.url})` }}
                        {...onTouchEnd(this.handleSelect(image))}
                    />
                ))}
                <Navigator menus={['首页', '分类', '消息', '我的']} />
            </div>
        );
    }
}
